// 1、获取到裁剪区的DOM元素（找要截图的照片）

const $image=$('#image')
// 2、定义初始化的配置选项（）
const options={
    // 确定纵横比
    aspectRatio:1,
    // 指定预览区域
    preview:'.img-preview'//预览区域的类名
}
// 3、创建裁剪区(函数传参的形式，初始化配置选项)
// $image.cropper这个函数是引入jquery-cropper.js的方法
$image.cropper(options)

// 为选择文件的按钮注册点击时间
$('#btnChangeImg').click(function(){
    // 模拟文件选择框的点击时间
    $('#file').click()
})
// 为文件选择框监听change事件
$('#file').change(function(e)
// e.target指向事件的触发源(DOM对象)
{
   
    const files=e.target.files
if(files.length===0)return 
// 注意不能直接把文件作为img标签的img属性值，img的src只接受地址
const imgStr=URL.createObjectURL(files[0])

// 把图片展示到图盘的位置
// 因为现在在裁剪区，不是单纯点的图片区域，所以需要cropper
// 三步走：
// 1、销毁旧裁剪区

$image.cropper('destroy')

// 2、为图片设置新的src
$image.attr('src',imgStr)

// 3、初始化图片的裁剪区域
$image.cropper(options)

})

// 为上传头像注册点击事件
$('#btnUploadImg').click(function(){
    
    const base64=$image.cropper('getCroppedCanvas',{
        // 创建画布的宽和高
        width:100,
        height:100
        // toDataURL('image/png')的作用是，转化为base64编码格式。toDataURL是画布的canvas的方法
    }).toDataURL('image/png')
    // 发起Ajax请求，更换用户头像
    $.post('/my/update/avatar',{
        avatar:base64
    },function(res){
if(res.status===0){
    // 更新父窗口的头像
    window.parent.getUserInfo()

    
}
layer.msg(res.message)
    })

})